<!--suppress ALL -->
<template>

 <span>
    <list-cpt :head-items=this.headItems :data=this.data :paged=this.paged
              :content="content"
              :postUrl="roleAddUrl" :updateUrl="roleUpdateUrl" :deleteUrl="roleDeleteUrl + '?type=1&ids='"
              @refreshPageSize="refreshPageSize" @refreshCurrentPage="refreshCurrentPage"
              @refresh="refresh"
              @echo="echo"
              @reset-post-content="resetPostContent">

      <template #add>
         <el-form ref="form" :model="content">
            <el-form-item label="角色名称">
              <el-input placeholder="角色名称" v-model="content.label"></el-input>
            </el-form-item>
            <el-form-item label="角色描述">
              <el-input placeholder="角色描述" v-model="content.detail"></el-input>
            </el-form-item>
            <el-form-item label="角色备注">
              <el-input placeholder="角色备注" v-model="content.memo"></el-input>
            </el-form-item>

            <el-form-item label="角色菜单">
            </el-form-item>
            <el-tree
              :data="menuTree"
              show-checkbox
              node-key="id"
              ref="tree1"
              @node-click="handleNodeClick"
              @check="checkMenu"
              highlight-current>
            </el-tree>

           <el-form-item label="角色权限">
            </el-form-item>
            <el-tree
              :data="privTree"
              show-checkbox
              node-key="id"
              ref="tree2"
              @check="checkPriv"
              @node-click="handleNodeClick1"
              highlight-current>
            </el-tree>

         </el-form>
      </template>

      <template #update>
         <el-form ref="form" :model="content">
            <el-form-item label="角色名称">
              <el-input placeholder="角色名称" v-model="content.label"></el-input>
            </el-form-item>
            <el-form-item label="角色描述">
              <el-input placeholder="角色描述" v-model="content.detail"></el-input>
            </el-form-item>
            <el-form-item label="角色备注">
              <el-input placeholder="角色备注" v-model="content.memo"></el-input>
            </el-form-item>

            <el-form-item label="角色菜单">
            </el-form-item>
            <el-tree
              :data="menuTree"
              show-checkbox
              node-key="id"
              ref="tree3"
              @check="checkMenu1"
              highlight-current>
            </el-tree>

           <el-form-item label="角色权限">
            </el-form-item>
            <el-tree
              :data="privTree"
              show-checkbox
              node-key="id"
              ref="tree4"
              @check="checkPriv1"
              highlight-current>
            </el-tree>

         </el-form>
      </template>

    </list-cpt>
  </span>

</template>

<script>
import ListCpt from '../../../components/ListCpt'
import {uaaRoleItem} from '../../../components/Po'
import {url} from '../../../common/Common.js'
import {get} from '../../../components/HttpUtil'

export default {
  name: 'UaaRolePage',
  components: {ListCpt},

  data() {
    return {
      headItems: uaaRoleItem,
      paged: true,
      currentPage: 1,
      pageSize: 10,
      count: 0,
      data: {},
      roleListUrl: url.uaa.role.list,
      roleAddUrl: url.uaa.role.add,
      roleUpdateUrl: url.uaa.role.update,
      roleDeleteUrl: url.uaa.role.delete,
      privTreeUrl: url.uaa.priv.tree,
      menuTreeUrl: url.uaa.menu.tree,
      content: {
        label: '',
        detail: '',
        memo: '',
        menus: []
      },

      menuTree: [],
      privTree: [],
      menuSelected: [],
      privSelected: [],
      currentNode: 0,

    }
  },
  methods: {
    gainList: function () {
      var url = this.roleListUrl + '?size=' + this.pageSize + '&page=' + this.currentPage
      get(url, this.$store.state.token)
        .then(res => {
          this.data = res.data
        })
        .catch(e => {
          console.log(e)
        })
    },
    refreshPageSize(val) {
      this.currentPage = 1
      this.pageSize = val
      this.gainList()
    },

    refreshCurrentPage(val) {
      this.currentPage = val
      this.gainList()
    },
    gainPrivTree: function () {
      var url = this.privTreeUrl
      get(url, this.$store.state.token)
        .then(res => {
          this.$nextTick(function () {
            this.privTree = res.data
          })
        })
        .catch(e => {
          console.log(e)
        })
    },
    gainMenuTree: function () {
      var url = this.menuTreeUrl
      get(url, this.$store.state.token)
        .then(res => {
          this.$nextTick(function () {
            this.menuTree = res.data
          })
        })
        .catch(e => {
          console.log(e)
        })
    },
    checkMenu(val) {
      this.$nextTick(() => {
        var menuSelected = this.$refs.tree1.getCheckedKeys()
        let arrayPush = []
        for (var i = 0; i < menuSelected.length; i++) {
          arrayPush.push({'id': menuSelected[i]})
        }
        this.content.menus = arrayPush
      })
    },
    checkPriv(val) {
      this.$nextTick(() => {
        var privSelected = this.$refs.tree2.getCheckedKeys()
        let arrayPush = []
        for (var i = 0; i < privSelected.length; i++) {
          arrayPush.push({'id': privSelected[i]})
        }
        this.content.privs = arrayPush
      })
    },
    checkMenu1() {
      this.$nextTick(() => {
        var menuSelected = this.$refs.tree3.getCheckedKeys()
        for (var i = 0; i < menuSelected.length; i++) {
          this.content.menus.push({'id': menuSelected[i]})
        }
      })
    },
    checkPriv1() {
      this.$nextTick(() => {
        var privSelected = this.$refs.tree4.getCheckedKeys()
        for (var i = 0; i < privSelected.length; i++) {
          this.content.privs.push({'id': privSelected[i]})
        }
      })
    },
    refresh() {
      this.gainList();
    },
    echo(data) {
      console.log(data)
      this.$refs.tree3.setCheckedKeys([]);
      this.$refs.tree4.setCheckedKeys([]);

      this.content = data;
      var that = this;
      this.content.menus.forEach(function (e) {
        that.$refs.tree3.setChecked(e.id, true, false)     // 此时的id就是之前你选中的数据对应的id
      })
      this.content.privs.forEach(function (e) {
        that.$refs.tree4.setChecked(e.id, true, false)     // 此时的id就是之前你选中的数据对应的id

      })
    },
    resetPostContent() {
      this.content = {};
    }
  },
  mounted: function () {
    this.gainList()
  },
  created: function () {
    this.gainPrivTree()
    this.gainMenuTree()
  },
  watch: {
    tree: function (newQuestion, oldQuestion) {
      this.tree = newQuestion
    }
  }
}


</script>

<style scoped>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
}

.el-menu-vertical-demo {
  min-height: 100%;
}
</style>
